<template>
	<view class="news-list">

		<!-- tabs -->
		<scroll-view scroll-x="true" class="scroll-container">
			<text class="scroll-item" :class="item.id == activeTab?'active':''" v-for="(item) in tabList" :key="item.id"
				@click="selectTab(item)">{{item.classname}}</text>
		</scroll-view>

		<!-- 新闻list -->
		<view class="news-list-contaienr">
			<news-item v-for="item in newsList" :key="item.id" :newsItem="item" @click.native="goToDetail(item)"></news-item>
		</view>

		<view class="more-info" v-if="newsList.length">
			<view v-if="loadingState == 1">数据加载中...</view>
			<view v-if="loadingState == 2">已经没有更多数据~~</view>
		</view>
		<view v-else>
			<image src="/static/images/nodata.png" mode="aspectFill" class="no-data"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [],
				activeTab: '',
				newsList: [], // 新闻list
				pageConfig: {
					current: 1,
					size: 8,
				},
				loadingState: 0, // 0:没有状态；1：加载中；2：没有更多上数据；
			}
		},
		methods: {
			selectTab(item) {
				console.log(item)
				this.activeTab = item.id
				
				this.pageConfig.current = 1
				this.newsList = []
				
				this.loadingState = 0 // 切换的时候，要清空，否则状态共享了，会有错误的。
				
				this.getNewsList(this.activeTab)
			},
			/**
			 * 获取tabs
			 */
			getTabs() {
				/* [
				    {
				        "id": "50",
				        "classname": "国内"
				    },
				    {
				        "id": "51",
				        "classname": "国际"
				    },
				    {
				        "id": "52",
				        "classname": "体育"
				    },
				    {
				        "id": "53",
				        "classname": "科技"
				    },
				    {
				        "id": "54",
				        "classname": "时尚"
				    },
				    {
				        "id": "55",
				        "classname": "游戏"
				    }
				] */
				uni.request({
					url: 'https://ku.qingnian8.com/dataApi/news/navlist.php',
					success: (res) => {
						console.log('tabs-res:', res)
						this.tabList = res.data || []
						if (this.tabList.length > 0) {
							this.activeTab = this.tabList[0].id
							this.getNewsList(this.activeTab)
						}
					},
					complete: () => {

					}
				})
			},
			/**
			 * 获取新闻list
			 */
			getNewsList(id) {

				/* [
					{
					    "id": "260",
					    "title": "uniapp+vue3版的新项目“咸虾米壁纸”已经上线啦",
					    "picurl": "http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20231112/1699775864.jpg",
					    "posttime": "1699774729",
					    "hits": "41212",
					    "classid": "50",
					    "author": "咸虾米"
					}
				] */
				
				// this.loadingState = 1; // 为什么不放在这里：数据就一条，还是会有moreInfo的提示，不好看。
				uni.request({
					url: 'https://ku.qingnian8.com/dataApi/news/newslist.php',
					data: {
						cid: id,
						num: this.pageConfig.size,
						page: this.pageConfig.current,
					},
					success: (res) => {
						console.log('新闻list-res：', res)
						this.newsList = [...this.newsList, ...res.data || []]
						if (res.data.length<8) {
							this.loadingState = 2
						}
					},
					fail: () => {
						this.loadingState = 0;
					}
				})
			},
			/**
			 * 跳转到详情
			 */
			goToDetail(item){
				console.log('goToDetail:',item)
				uni.navigateTo({
					url:`/pages/news-detail/news-detail?cid=${item.classid}&id=${item.id}`,
				})
			},
		},
		onLoad() {
			this.getTabs()
		},
		onReachBottom(e) {
			console.log('onReachBottom', e)
			// 如果数据为空，不要调用接口了。
			if (this.loadingState == 2) {
				return false;
			}
			this.pageConfig.current++
			this.loadingState = 1; // 为什么不放在这里：数据就一条，还是会有moreInfo的提示，不好看。
			
			this.getNewsList(this.activeTab)
		},

	}
</script>

<style lang="scss">
	.news-list {

		// padding-top: 200rpx;
		// padding-top: var(--window-top);
		.scroll-container {
			display: flex;
			flex-wrap: nowrap;
			white-space: nowrap;
			height: 100rpx;
			line-height: 100rpx;
			background: #F7F8FA;

			// 固定top
			position: fixed;
			top: 100rpx; // 为了兼容性，所以用变量。
			top: var(--window-top); // 为了兼容性，所以用变量。
			z-index: 11;
			
			/deep/ ::-webkit-scrollbar {
				width: 4px !important;
				height: 1px !important;
				overflow: auto !important;
				background: transparent !important;
				-webkit-appearance: auto !important;
				display: block;
			}

			.scroll-item {
				// width: 120rpx;
				// min-width: 120rpx;
				// display: inline-block;
				// color:red;

				padding: 0 48rpx;

				&.active {
					color: #31C27C;
				}
			}
		}

		.news-list-contaienr {
			padding: 24rpx;
			padding-top: 100rpx;
		}

		.more-info {
			text-align: center;
			color: #888;
			font-size: 28rpx;
			margin-bottom: 24rpx;
		}
		
		.no-data{
			width: 100%;
		}
	}
</style>